<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>订单修改</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="css/suistyle.css">
</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <!-- 你的html代码 -->
        <div class="content">
            <div class="list-block">
                <ul>
                    <li class="item-content head1">
                        <h1 class="head">良诸暨君澜酒店纳斯比法式餐厅</h1>
                    </li>
                    <li class="item-content item-link">
                        <div class="item-media"><i class="icon icon-f7"></i></div>
                        <div class="item-inner">
                            <div class="item-title">日期 时间</div>
                            <div class="item-after"><input type="text" id='datetime-picker' class="datatime"/></div>
                        </div>
                    </li>
                    <li class="item-content ">
                        <div class="item-media"><i class="icon icon-f7"></i></div>
                        <div class="item-inner">
                            <span>就餐人数</span>
                            <div class="rt">
                                <a href="javascript:;" class="btn_sub"><img src="img/btn_sub.gif" alt="" width=32 height=32/></a>
                                <span class="number">1</span>
                                <a href="javascript:;" class="btn_add"><img src="img/btn_add.gif" alt="" width=32 height=32/></a>
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-link">
                        <div class="item-media"><i class="icon icon-f7"></i></div>
                        <div class="item-inner">
                            <div class="item-title">餐桌类型</div>
                            <div class="item-after"><input type="text" id='picker'/></div>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
        <nav class="bar bar-tab">
            <a href="#" class="button button-big" id="submit">确  认</a>
        </nav>


    </div>
</div>

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src="js/sm.js" charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script>$.init()</script>

<script>
    $("#datetime-picker").datetimePicker({
        value: ['', '', '', '', '']
    });
</script>
<script>
    $("#picker").picker({
        toolbarTemplate: '<header class="bar bar-nav">\
  <button class="button button-link pull-left"></button>\
  <button class="button button-link pull-right close-picker">确定</button>\
  <h1 class="title">餐桌类型</h1>\
  </header>',
        cols: [
            {
                textAlign: 'center',
                values: ['1-4人桌', '4-6人桌', '6-10人桌', '包厢']
            }
        ]
    });
</script>
<script>
    $('#submit').click(function(){
        $('.page').append('<div class="dwo" style="background:#313131;opacity: 0.8"><p style="position: absolute;top:50%;left: 50%;color:#fff;font-size: 0.9rem;padding:0.75rem 1.5rem;background: #000;margin-left: -3.6rem;margin-top: -1.425rem">订单修改成功</p></div>')
    })
    $('.btn_sub').click(function(){
        var a= $(this).next().html();
        if(a>=1){
            $(this).next().html(a-1);
        }else{
            $(this).next().html();
        }
    })
    $('.btn_add').click(function(){
        var a = $(this).prev().html();
        $(this).prev().html(a-0+1);
    })
</script>
</body>
</html>